<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        .content{
            width: 520px;
            margin: 0 auto;
        }
        tr{
            width: 428px;
            padding: 14px 16px;
        }
        .back{
            position: relative;
            width: 155px;
            padding: 0 22px 20px 0;
        }

        img{
            width: 158px;
        }
        .choose{
            filter: brightness(0.7);
        }
        .img-back{
            width: 158px;
            height: 106px;
            border: 3px solid #6CDAC6;
        }
        .check{
            position: absolute;
            top: 48px;
            left: 72px;
            width: 20px;
        }


    </style>

    <script>
        var sum = 0;
        function init(){
            $("td").click(function () {
                if($(this).children().children().attr("class") == "img-back"){
                    $(this).children().children().attr("class","");
                    $(this).children().children().children(".real").removeClass("choose");
                    $(this).children().children().children(".background").hide();
                    sum -= 1;
                }else if(sum >= 2){
                    alert("最多选择两张");
                }else{
                    sum += 1;
                    $(this).children().children().attr("class","img-back");
                    $(this).children().children().children(".real").addClass("choose");

                    $(this).children().children().children(".background").show();
                    $(this).children().children().children(".background").attr("src","check.png");
                }
            });

        }

        function cal() {
            var arr = new Array();
            $('table tr td div div').each(function(){
                if($(this).attr("class") == "img-back"){
                    var temp = new Array();
                    temp.push($(this).parent().parent().parent().index(),$(this).parent().parent().index())
                    arr.push(temp)
                }
            });
            for (var i = 0 ; i < arr.length;i++){
                console.log(arr[i]);
                console.log("在数组里的index是"+ (arr[i][0] * 3 + arr[i][1]));
            }
        }

    </script>
</head>
<body onload="init()">
<div class="content">
<table>
    <tr>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>

        </td>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>

        </td>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>

        </td>
    </tr>
    <tr>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>

        </td>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>

        </td>
        <td>
            <div class="back">
                <div>
                    <img class="real" src="test.jpg">
                    <img class="check background" src="">
                </div>
            </div>
        </td>
    </tr>
</table>
</div>
<button onclick="cal()">click</button>
</body>
</html>